// src/components/core/Cart.tsx
import { Col, Divider, Input, Row } from 'antd'
import React, { ChangeEvent, useEffect, useState } from 'react'
import { CartItem, getCart } from '../../helpers/cart'
import CartItemFc from './CartItemFc'
import Layout from './Layout'
import Pay from './Pay'
import TotalPrice from './TotalPrice'

const Cart = () => {
    // 初始化购物车数据
    const [cart, setCart] = useState<CartItem[]>([])
    // 初始化收货地址
    const [address, setAddress] = useState<string>('')
    // 初始化商品总价
    const [totalPrice, setTotalPrice] = useState<number>(0)

    useEffect(() => {
        setCart(getCart())
    }, [])

    // 显示购物车表格
    const showCart = () => (
        <table style={{ width: '100%' }}>
            <thead>
                <tr>
                    <th className="ant-table-cell">商品封面</th>
                    <th className="ant-table-cell">商品名称</th>
                    <th className="ant-table-cell">商品价格</th>
                    <th className="ant-table-cell">商品分类</th>
                    <th className="ant-table-cell">商品数量</th>
                    <th className="ant-table-cell">操作</th>
                </tr>
            </thead>
            <tbody className="ant-table-tbody">
                { cart.map(item => (
                    <CartItemFc setCart={setCart} product={item} key={item._id} />
                )) }
            </tbody>
        </table>
    )
    return (
        <Layout title="购物车" subTitle="">
            <Row gutter={16}>
                <Col span="16">
                    { showCart() }
                </Col>
                <Col span="8">
                    <Row>
                        <Input 
                            value={address} 
                            onChange={(event: ChangeEvent<HTMLInputElement>) => 
                                setAddress(event.target.value)
                            } 
                            placeholder="请输入收货地址" 
                        />
                    </Row>
                    <Divider />
                    <Row>
                        <TotalPrice cart={cart} setTotalPrice={setTotalPrice} />
                    </Row>
                    <Row>
                        <Pay totalPrice={totalPrice} cart={cart} address={address} />
                    </Row>
                </Col>
            </Row>
        </Layout>
    )
}

export default Cart